body,
ul,
li,
p,
h3 {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

.wrapper {
    width: 938px;
    height: 128px;
    border: 1px solid #d3d3d3;
}

.wrapper li {
    width: 156px;
    height: 128px;
    float: left;
    overflow: hidden;
}
.wrapper li a {
    display: block;
    height: 128px;
    width: 156px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.wrapper img {
    position: absolute;
    bottom: 0;
    right: -15px;
    height: 72px;
    width: 117px;
}
.wrapper .info {
    position: absolute;
    top: 0;
    left: 0;
    width: 136px;
    padding: 4px 10px;
}
.wrapper .info h3 {
    font-size: 14px;
    font-weight: 700;
}
.wrapper .info p {
    color: #868686;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    width: 136px;
    overflow: hidden;
}
.wrapper .info .price {
    font-size: 14px;
    font-style: italic;
    color: #fa2a5d;
    height: 35px;
}
.wrapper .line {
    position: absolute;
    right: 0;
    width: 0;
    height: 128px;
    border: 1px dashed #cacaca;
}
.wrapper .mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 128px;
    width: 156px;
    opacity: 0;
    background: #000;
}
.wrapper:hover .mask {
    opacity: 0.15;
}

/* 动画效果 */
.wrapper ul * {
    transition: all linear 0.1s;
}
.wrapper li.big,
li.big a {
    width: 314px;
}
.wrapper li.big img {
    width: 195px;
    height: 120px;
    right: 0;
    bottom: 0;
}
.wrapper li.big .info {
    width: 290px;
}
.wrapper li.big h3 {
    font-size: 18px;
}
.wrapper li.big p {
    font-size: 14px;
    width: 166px;
}
.wrapper li.big p.price {
    font-size: 16px;
    padding-top: 7px;
}
.wrapper li.big a:hover .mask {
    opacity: 0;
}
